<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户登录</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}">

    <style>
        .bgColor {
            background-color: rgba(243, 66, 111, 0.15)
        }

        .divBorder {
            border: solid 1px rgba(12, 24, 255, 0.15);
            padding: 10px;
            margin-top: 10px;
            border-radius: 10px;
            text-align: center;
            vertical-align: middle;
        }

        .h4font {
            margin-top: 0px;
            font-family: 微软雅黑;
            font-weight: 500;
        }
        .center {
            padding: 25% 0;
        }
        .verifyInput {
            vertical-align: middle;
            font-size: 14px;
            font-weight: normal;
            line-height: 1;
            /*border:1px solid #999;*/
            float: left;
            width: 200px;
            height: 30px;

        }
        .verifyImage {
            vertical-align: middle;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="divBorder col-sm-offset-4 col-sm-4">
            <h3 class="panel panel-heading h4font">
                用户登录
            </h3>
            <form id="empForm" class="form-horizontal">
                <div class="input-group ">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
                    <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入用户名称"/>
                </div>
                <br>
                <div class="input-group ">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"/>
                </div>
                <br/>
                <input type="button" id="btn" class="btn btn-lg btn-block btn-info" value="登 录">
            </form>
        </div>
    </div>

</div>


<script th:src="@{/bootstrap/js/jquery-3.3.1.min.js}"></script>
<script>
    function getFormData(id) {
        var formData = {};
        var t = $('#' + id).serializeArray();
        $.each(t, function () {
            formData[this.name] = this.value;
        });
        return JSON.stringify(formData);
    }

    //点击button按钮处理
    $("#btn").click(function () {
        var emp = getFormData('empForm');
        $.ajax({
            type: "post",
            url: "login/validate",
            dataType: "json",
            contentType: "application/json",      //网上很多介绍加上此参数的，后来我发现不加入这个参数才会请求成功。
            data: emp,
            success: function (response) {
                if (response.code) {
                    location.href = "login/main";
                } else {
                    location.href = "error";
                }
            }
        });
    })
</script>
</body>
</html>